<template>
  <div class="detail">
    <p>歌曲详情</p>
    <p>当前歌曲：{{ $route.params.name }}</p>
    <p>
      从列表页跳转到详情页，跳转时要符合动态路由的格式，格式中有固定部分也有可变部分，斜线分割
    </p>
    <p>详情页这个组件可以渲染出来非常多的页面，唯一的要求就是url符合格式</p>
    <p>动态路由的使用场景：结构相同、数据不同、大量重复</p>
    <router-link to="/detail/最伟大的作品">最伟大的作品</router-link>
    <p>滚动的占位符</p>
    <p>滚动的占位符</p>
    <p>滚动的占位符</p>
    <p>滚动的占位符</p>
    <p>滚动的占位符</p>
    <p>滚动的占位符</p>
  </div>
</template>

<script>
export default {
  // watch 动态路由地址的变化 可以通过监听得知
  created() {
    // 需要加载当前歌曲的歌词、评论、封面等。。。数据在后端 需要发请求
    // this.$http.get('/getsongdetail?id='+this.$route.params.name) // 假的 没有这个接口 但是这个意思
    console.log(`正在获取${this.$route.params.name}的歌曲信息!`);
    // console.log(this.$route.params.name);
  },
  // url地址更新但还是这个组件 如果是从别的组件跳转过来 或者跳到别的组件 那就是enter leave
  beforeRouteUpdate(to, from, next) {
    // 为什么会产生这个问题？ 什么场景下会触发这个问题？ 怎么解决？
    console.log(`正在获取${to.params.name}的歌曲信息!`);
    next();
  },
};
</script>

<style>
    .detail p {
        line-height: 10;
    }
</style>